<%--
  Created by IntelliJ IDEA.
  User: LoveR


  Date: 2021/7/6
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<style type="text/css">
    @import url("/css/update_header.css");
</style>
<style type="text/css">
    .progress {
        width: 100%;
        height: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 10px 0px;
        overflow: hidden;
    }

    /* 初始状态设置进度条宽度为0px */
    .progress > div {
        width: 0px;
        height: 100%;
        background-color: yellowgreen;
        transition: all .3s ease;
    }
</style>
<script src="/js/jquery-3.4.1.min.js"></script>
<head>
    <title>视频管理</title>
</head>
<body>
<header class="header">
    <h1><img style="height: 50px;width: 180px"
             src=""
             alt="">
    </h1>
    <form>
        <input type="text" name="search" placeholder="Search.." class="search">
    </form>
    <button class="searchButton searchButton2">立即搜索</button>
    <div class="login"  >
        <!-- 登录 -->
        <!-- 注册 -->
        <span><a href="login_user.jsp" ><input type="button" class="dlspan" value="登 录" /></a></span>&nbsp;&nbsp;
        <span><a href="register_user.jsp" ><input type="button" class="zcspan" value="注 册" /></a></span>
    </div>
</header>
<div class="topNav">
    <!-- 导航栏 -->
    <div style="float: left;">
        <button style="" class="links_button button dropdown">
            <a href="tuijian.jsp" style="text-decoration: none">推荐</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="yingshi.jsp" style="text-decoration: none">影视</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="yinyue.jsp" style="text-decoration: none">音乐</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="youxi.jsp" style="text-decoration: none">游戏</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="tiyu.jsp" style="text-decoration: none">体育</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="zongyi.jsp" style="text-decoration: none">综艺</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="yule.jsp" style="text-decoration: none">娱乐</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="dongman.jsp" style="text-decoration: none">动漫</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="shenghuo.jsp" style="text-decoration: none">生活</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="meishi.jsp" style="text-decoration: none">美食</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
        <button style="" class="links_button button dropdown">
            <a href="chongwu.jsp" style="text-decoration: none">宠物</a>
            <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
        </button>
    </div>
</div>

<ul class="vertical">
    <li><a href="watch_history.jsp" class="verticalLiA">观看历史</a></li>
    <li><a href="#" class="verticalLiA">个人信息</a></li>
    <li style="background-color: deepskyblue"><a href="#" class="verticalLiA">视频管理</a></li>
    <li><a href="#" class="verticalLiA">我的关注</a></li>
    <li><a href="#" class="verticalLiA">我的粉丝</a></li>
</ul>

<div class="card-container">
    <div class=""></div>
    <div class="container-upload">
        <div class="upload-video">
            <label class="upload-button">
                <div class="box-upload">
                    <div class="desc" name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;">
                        <%--span class="btn-block">点击上传</span>--%>
                        "或直接将视频文件拖入此区域"
                    </div>
                    <div class="info-desc">为了更好的观看体验，超过40秒的视频建议上传横版视频</div>
                    <div class="progress">
                        <div></div>
                    </div>
                    <script>
                        var dropbox = document.getElementById('dropbox');
                        document.addEventListener("dragenter", function (e) {
                            dropbox.style.borderColor = 'gray';
                        }, false);
                        document.addEventListener("dragleave", function (e) {
                            dropbox.style.borderColor = 'silver';
                        }, false);
                        dropbox.addEventListener("dragenter", function (e) {
                            dropbox.style.borderColor = 'gray';
                            dropbox.style.backgroundColor = 'white';
                        }, false);
                        dropbox.addEventListener("dragleave", function (e) {
                            dropbox.style.backgroundColor = 'transparent';
                        }, false);
                        dropbox.addEventListener("dragenter", function (e) {
                            e.stopPropagation();
                            e.preventDefault();
                        }, false);
                        dropbox.addEventListener("dragover", function (e) {
                            e.stopPropagation();
                            e.preventDefault();
                        }, false);
                        dropbox.addEventListener("drop", function (e) {
                            if(window.uploaded)
                            {
                                alert('视频文件正在上传,请稍后');
                                return;
                            }
                            e.stopPropagation();
                            e.preventDefault();
                            handleFiles(e.dataTransfer.files);
                        }, false);

                        function handleFiles(files) {
                            var len = files.length;
                            if (len > 1) {
                                alert('只能上传一个视频文件');
                                return;
                            }
                            var mp4 = files[0];
                            if ('video/mp4' != mp4.type) {
                                alert('只能上传mp4格式的视频');
                                return;
                            }
                            //console.log(mp4);
                            uploadVideo(mp4);
                        }

                        function uploadVideo(mp4) {
                            if ('video/mp4' != mp4.type) {
                                alert('只能上传mp4格式的视频');
                                return;
                            }
                            uploaded=true;
                            var formdata = new FormData();
                            formdata.append('videoFile', mp4);
                            $.ajax({
                                url: '/videos/upload_video',
                                type: 'post',
                                data: formdata,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                success:function(jsonData){
                                    uploaded=false;
                                    console.info(jsonData);
                                    //转成JSON
                                    var result=$.parseJSON(jsonData);
                                    window.location.href='/user/pub_video.jsp?videoName='+result.videoName;
                                },
                                error:function(){
                                    uploaded=false;
                                },
                                xhr: function () {
                                    var xhr = new XMLHttpRequest();
                                    xhr.upload.addEventListener('progress', function (e) {
                                        //loaded代表上传了多少,total代表总数为多少
                                        var progressRate =parseInt((e.loaded / e.total) * 100) + '%';
                                        //通过设置进度条的宽度达到效果
                                        console.info(progressRate);
                                        $('.progress > div').css('width', progressRate);
                                    });
                                    return xhr;
                                }
                            });
                        }
                    </script>
                    <input type="file" id="upload-input" class="upload-input" accept="video/mp4,video/mov,video/avi,video/mpeg,video/rmvb" multiple="">
                </div>
            </label>
        </div>
    </div>
</div>
</body>
</html>
